<script lang="ts" setup>
import TypeIt from "typeit";

const queue = ref([
  { type: "ask", msg: "" },
  { type: "answer", msg: "" },
  { type: "ask", msg: "" },
  { type: "answer", msg: "" },
]);

const msgList = ref(["shit, man!", "shit, brother!", "I have problem", "what's wrong!"]);

const newSource = ref<{ type: string; msg: string }[]>([]);
onMounted(async () => {
  runNext();
});

const runNext = async () => {
  if (!queue.value.length) return;
  const item = queue.value.shift();
  const msg = msgList.value.shift();
  if (!item || msg === undefined) return;
  newSource.value.push(item);
  await nextTick();
  if (item.type === "ask") {
    const askIns = new TypeIt(".ask-text", {
      speed: 100,
      afterComplete: () => {
        askIns.destroy();
        const val = newSource.value.at(-1);
        if (val) {
          val.msg = msg;
          runNext();
        }
      },
    })
      .type(msg)
      .go();
  } else {
    const ansIns = new TypeIt(".answer-text", {
      speed: 100,
      afterComplete: () => {
        ansIns.destroy();
        const val = newSource.value.at(-1);
        if (val) {
          val.msg = msg;
          runNext();
        }
      },
    })
      .type(msg)
      .go();
  }
};
</script>
<template>
  <ul class="dialog">
    <li v-for="(item, index) in newSource" :key="index" :data-type="item.type">
      <div :class="item.type === 'ask' ? 'ask-content' : 'answer-content'">
        <p :class="item.type === 'ask' ? 'ask-avatar' : 'answer-avatar'">
          {{ item.type }}
        </p>
        <div>
          <p v-if="item.msg" class="text">{{ item.msg }}</p>
          <p v-else :class="item.type === 'ask' ? 'ask-text' : 'answer-text'"></p>
        </div>
      </div>
    </li>
  </ul>
  <ul class="tabs">
    <li class="tab">
      <div>tab1</div>
      <ChromeTabBg />
    </li>
    <li class="tab">
      <div>tab2</div>
      <ChromeTabBg />
    </li>
  </ul>
</template>
<style lang="less" scoped>
.dialog {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  li[data-type="ask"] {
    width: 100%;
    justify-items: flex-end;
    .ask-content {
      display: flex;
      flex-direction: row-reverse;
      .ask-avatar {
        margin-left: 16px;
      }
    }
  }
  li[data-type="answer"] {
    width: 100%;
    justify-items: flex-start;
    .answer-content {
      display: flex;
      .answer-avatar {
        margin-right: 16px;
      }
    }
  }
}
.tabs {
  display: flex;
  .tab {
    list-style: none;
    height: 36px;
    position: relative;
    div {
      width: 100%;
      font-size: 16px;
      line-height: 1.5;
      color: #fff;
      position: relative;
      z-index: 10;
      padding: 6px 16px;
      text-align: center;
    }
    svg {
      position: absolute;
      top: 0;
      height: 100%;
      z-index: -1;
    }
  }
}
</style>
